<template>
  <lay-container
    fluid="true"
    style="padding: 10px"
    class="analysis"
  >
    <lay-row space="10">
      <lay-col md="24">
        <lay-card>
          <lay-tab
            type="brief"
            v-model="tabs"
            class="tabs"
            @change="changeTabItem"
          >
            <lay-tab-item
              title="按人统计"
              id="1"
              v-if="httpUrls.includes('/Checkmsg/GetPersonSta')"
            >
            </lay-tab-item>
            <lay-tab-item
              title="按项目统计"
              id="2"
              v-if="httpUrls.includes('/Checkmsg/GetProjectSta')"
            >
            </lay-tab-item>
          </lay-tab>

          <div
            v-if="tabs == '1'"
            style="margin-bottom: 8px;"
          >
            <lay-date-picker
              style="display: inline-block;"
              v-model="searchTime"
              range
              class="w"
              size="sm"
              ref="dataPicker"
              :placeholder="['开始日期','结束日期']"
            ></lay-date-picker>
            <lay-button
              @click="tabList1"
              class="btn"
              type="primary"
              size="sm"
              style="margin-left: 12px ;"
            >查询
            </lay-button>
          </div>

          <mearchMsg
            v-else
            class="msg_val"
            :tabs="tabs"
            :searchTime="searchTime"
            :httpUrls="httpUrls"
            @left1="tabList1"
            @search="getSearch"
            @exportXlsx="exportXlsx"
          />

          <lay-table
            v-if="tabs == '1'"
            v-model:selectedKeys="selectedKeys"
            :columns="prjectListTab"
            :dataSource="tabItem"
            :checkbox="checkbox"
            :default-toolbar="false"
          >
          </lay-table>

          <lay-table
            v-else
            v-model:selectedKeys="selectedKeys"
            :columns="columns"
            :dataSource="dataSource"
            :checkbox="checkbox"
            :default-toolbar="['filter']"
            @row="rowClick"
          >
            <!-- :cell-style="cellStyle" -->
            <template v-slot:status="{ data }">
              <!--  报告状态,0待认领，1送审中，2待审核，3已审核，4已签发，5已归档 -->
              <lay-tag
                type="primary"
                v-if="data.status == 0"
              >待认领</lay-tag>
              <lay-tag
                type="primary"
                v-if="data.status == 1"
              >送审中</lay-tag>
              <lay-tag
                type="primary"
                v-if="data.status == 2"
              >待审核</lay-tag>
              <lay-tag
                type="primary"
                v-if="data.status == 3"
              >已审核</lay-tag>
              <lay-tag
                type="primary"
                v-if="data.status == 4"
              >已签发</lay-tag>
              <lay-tag
                type="primary"
                v-if="data.status == 5"
              >已归档</lay-tag>
            </template>
            <template v-slot:operator="{data }">
              <lay-button size="sm">修改</lay-button>
              <lay-button
                size="sm"
                type="primary"
              >删除</lay-button>
            </template>
          </lay-table>

          <lay-page
            v-if="tabs == '2'"
            v-model="current"
            v-model:limit="limit"
            :pages="pages"
            :total="total"
            :show-count="true"
            :show-limit="true"
            :showSkip="true"
            :show-page="true"
            @change="changePage"
          ></lay-page>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>
<script lang="ts">
import { isTemplateElement } from "@babel/types";
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import mearchMsg from "./component/search.vue";
import {
  GetProjectSta,
  GetPersonSta,
  GetProjectStaReport,
} from "../../../api/module/user";
import { httpServer } from "../../../api/config";

export default defineComponent({
  components: {
    mearchMsg,
  },
  setup() {
    const columns = [
      {
        title: "复选",
        width: "50px",
        type: "checkbox",
        fixed: "left",
      },
      {
        title: "序号",
        width: "60px",
        type: "number",
        fixed: "left",
      },
      {
        title: "收样日期",
        key: "sampleReceivingTime",
        width: "100px",
        ellipsisTooltip: true,
      },
      {
        title: "检测日期",
        key: "detectionTime",
        width: "100px",
        ellipsisTooltip: true,
      },
      {
        title: "工程名称",
        key: "projectName",
        width: "160px",
        ellipsisTooltip: true,
      },
      {
        title: "结构部位/工程部位",
        key: "constructionPosition",
        width: "160px",
        ellipsisTooltip: true,
      },
      {
        title: "检测数量",
        key: "numberofTests",
        width: "80px",
        ellipsisTooltip: true,
      },
      {
        title: "单位",
        key: "unit",
        width: "80px",
        ellipsisTooltip: true,
      },
      {
        title: "委托编号",
        key: "entrustmentNo",
        width: "140px",
        ellipsisTooltip: true,
      },
      {
        title: "样品编号",
        key: "sampleNo",
        width: "180px",
        ellipsisTooltip: true,
      },
      {
        title: "报告编号",
        key: "reportNo",
        width: "180px",
        ellipsisTooltip: true,
      },
      {
        title: "检测人员",
        key: "tester",
        width: "80px",
        ellipsisTooltip: true,
      },
      {
        title: "设备",
        key: "deviceName",
        width: "80px",
        ellipsisTooltip: true,
      },
      {
        title: "报告管理人",
        key: "manager",
        width: "100px",
        ellipsisTooltip: true,
      },
      {
        title: "报告状态",
        customSlot: "status",
        width: "80px",
        ellipsisTooltip: true,
      },
    ];

    const cellStyle = function (
      row: any,
      column: any,
      rowIndex: any,
      columnIndex: any
    ) {
      if (columnIndex == 8 || columnIndex == 9 || columnIndex == 10) {
        return "color:blue";
      }
    };

    const rowClick = (data: any) => {};

    const getLastMonth = () => {
      var now = new Date();
      var year = now.getFullYear();
      var month: any = now.getMonth() + 1; //0-11表示1-12月
      var day = now.getDate();
      var dateObj: any = {};
      dateObj.now = year + "-" + month + "-" + day;
      var nowMonthDay = new Date(year, month, 0).getDate(); //当前月的总天数
      if (month - 1 <= 0) {
        //如果是1月，年数往前推一年<br>
        dateObj.last = year - 1 + "-" + 12 + "-" + day;
      } else {
        var lastMonthDay = new Date(year, parseInt(month) - 1, 0).getDate();
        if (lastMonthDay < day) {
          // 1个月前所在月的总天数小于现在的天日期
          if (day < nowMonthDay) {
            //当前天日期小于当前月总天数
            dateObj.last =
              year +
              "-" +
              (month - 1) +
              "-" +
              (lastMonthDay - (nowMonthDay - day));
          } else {
            dateObj.last = year + "-" + (month - 1) + "-" + lastMonthDay;
          }
        } else {
          dateObj.last = year + "-" + (month - 1) + "-" + day;
        }
      }
      data.timeData.bt = dateObj.last;
      data.timeData.et = dateObj.now;
      let obj = {
        ...dateObj,
      };
      data.searchTime.push(obj.last);
      data.searchTime.push(obj.now);
      console.log(" data.searchTime", data.searchTime);
    };

    const selectedKeys = ref();
    const checkbox = ref(true);

    let httpUrl: any = ref([]);
    let url: any = sessionStorage.getItem("httpUrl");
    httpUrl.value = JSON.parse(url);
    const mainRef = ref();
    const data = reactive({
      value: null as any,
      current: 1,
      httpUrls: httpUrl,
      total: 10,
      pages: 0,
      curren: 10,
      limit: 10,
      tabs: "2",
      searchTimeMsg: {
        projectName: "",
        testItems: "",
        entrustmentNo: "",
        sampleNo: "",
        reportNo: "",
        client: "",
        status: null,
        bt: null,
        et: null,
      } as any,
      timeData: {} as any,
      searchTime: [] as any,
      tabList: [],
      tabItem: [] as any,
      dataSource: [] as any,
      prjectListTab: [
        {
          title: "序号",
          width: "60px",
          type: "number",
          fixed: "left",
        },
        {
          title: "检测项目",
          key: "projectName",
        },
        {
          title: "报告数量",
          key: "reportCount",
        },
        {
          title: "检测数量",
          key: "pointsofTests",
        },
        {
          title: "数量（点，尺，组等）",
          key: "pointsofTests",
        },
        {
          title: "未完成报告数量",
          key: "incompleteCount",
        },
        {
          title: "完成率",
          key: "completionRate",
        },
      ],
    });
    onMounted(() => {
      getLastMonth();
      if (data.httpUrls.includes("/Checkmsg/GetProjectStaReport")) {
        getTabList();
      }
    });

    const getSearch = (item: any) => {
      data.searchTimeMsg = {
        ...item,
      };
      if (data.searchTimeMsg.bt && data.searchTimeMsg.bt.length) {
      } else {
        data.searchTimeMsg.bt = null;
        data.searchTimeMsg.et = null;
      }
      getTabList();
    };

    const getTabList = async () => {
      let status: any = data.searchTimeMsg.status;
      const res: any = await GetProjectSta({
        pageIndex: data.current,
        pagePerCount: data.limit,
        condition: {
          ...data.searchTimeMsg,
        },
      });
      if (res.code == 200) {
        data.total = res.data.totalCount;
        // data.pages = res.data.pageCount;
        data.dataSource = res.data.datas;
      }
    };

    const changePage = (item: any) => {
      data.limit = item.limit;
      data.current = item.current;
      getTabList();
    };
    const user: any = sessionStorage.getItem("userInfo");
    const userInfo: any = JSON.parse(user);
    const getTabItem = async () => {
      console.log("data.timeData", data.timeData);

      const res: any = await GetPersonSta({
        manager: userInfo.userName,
        ...data.timeData,
      });
      if (res.code == 200) {
        console.log("tabItem", res.data);

        data.tabItem = res.data;
      }
    };

    const changeTabItem = () => {
      if (data.tabs == "1") {
        getTabItem();
      } else {
        getTabList();
      }
    };

    const tabList1 = () => {
      console.log("---------------*********", data.searchTime);

      if (data.searchTime.length) {
        data.timeData.bt = data.searchTime[0];
        data.timeData.et = data.searchTime[1];
      } else {
        data.timeData.bt = null;
        data.timeData.et = null;
      }

      getTabItem();
    };

    const exportXlsx = async () => {
      window.open(`${httpServer}${"/Checkmsg/GetProjectStaReport"}`);
      // await GetProjectStaReport();
    };

    return {
      mainRef,
      columns,
      selectedKeys,
      checkbox,
      exportXlsx,
      rowClick,
      tabList1,
      ...toRefs(data),
      cellStyle,
      changePage,
      changeTabItem,
      getSearch,
    };
  },
});
</script>

<style>
.tabs .layui-tab-content {
  padding: 0 !important;
}
.analysis .layui-select {
  width: 178px !important;
}
</style>
<style lang="less" scoped>
.msg_val {
  margin-bottom: 8px;
}
</style>
